<template>
	<view class="home">
		<u-modal v-model="pkDialogShow" :show-title="false" width="690" :show-confirm-button="false" z-index="20">
			<view class="slot-content">
				<view class="dialogMain">
					<view class="dialogMain_top">
						<image src="../../static/img/close.png" mode="" @click="closeDialog"></image>
					</view>
					<view class="" style="padding: 0 18rpx;border-bottom: 1rpx solid #e2e2e2;">
						<u-input v-model="pktitle" type="text" :border="false" :height="80" placeholder="请输入标题" />
					</view>
					<view class="" style="padding: 0 18rpx;border-bottom: 1rpx solid #e2e2e2;">
						<!-- <span>{{nowText}}</span> -->
						<u-input v-model="value" type="textarea" :border="false" :height="300" placeholder="请输入详情" />
					</view>
					<view class="">
						<u-upload :header="header" :action="action" :file-list="fmFileList" @on-success="fmSuccess"
							@on-remove="fmRemove" :max-count="1" width="181" height="181"
							upload-text="上传封面图"></u-upload>
					</view>
					<view class="" v-if="pkType == 'zp'">
						<u-upload :header="header" :action="action" :file-list="fileList" @on-success="success"
							@on-remove="remove" :max-count="9" width="181" height="181" upload-text="上传图片"></u-upload>
					</view>
					<view class="" v-else style="padding: 20rpx 10rpx;border-top: 1rpx solid #e2e2e2;">
						<view style="margin: 20rpx 0;font-size: 22rpx;">上传视频</view>
						<cl-upload fileType="video" :maxVideo="1" v-model="spList" :action="action"
							@onSuccess="onSuccess" :headers="header"></cl-upload>
					</view>
					<view class="dialogMain_bottom">
						<view class="" @click="submit">
							发布
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<view class="" style="position: fixed;top: 0;left: 0;width: 750rpx;z-index: 99999;" v-if="ceShow">
			<u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>
		</view>
		<view class="home_header" :style="'background-image: url('+logo+'); background-size: 100% 100%;'">
			<view class="back_header" @click="backNewHome"></view>
			<view class="home_tag_box" v-if="hide_data == '0'">
				<view class="home_tag_boxItem">
					访问量:{{qb_data}}
				</view>
				<view class="home_tag_boxItem">
					互动量:{{hf_data}}
				</view>
				<view class="home_tag_boxItem">
					解答率:{{jjl}}
				</view>
			</view>
			<view class="home_tab_box">
				<view class="home_tab_boxItem" v-for="(item,index) in tabList" :key="index"
					:class="{'active':activeTabIndex == index}" @click="chooseTab(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="" v-if="activeTabIndex == 0">
			<view class="home_module" style="background: linear-gradient(to bottom right, #ffb0aa, #e2e2e2);"
				v-if="open_xq == 1">
				<view class="home_module_header">
					<view class="home_module_header_left">
						<image src="../../static/img/ax.png" mode="" class="ax"></image>
						<!-- <view class="dg"></view> -->
						<view class="home_module_header_title">
							相亲活动
						</view>
					</view>
					<view class="home_module_header_right" @click="goXqHdList">
						更多
					</view>
				</view>
				<swiper class="xswiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
					<swiper-item v-for="(item,index) in xqInfo" :key="index">
						<view class=""  @click="goBindDetail(item)">
							<view class="firstImg">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="firstText">
								{{item.title}}
							</view>
						</view>
					</swiper-item>
				</swiper>

			</view>
			<view class="home_module">
				<view class="home_module_header">
					<view class="home_module_header_left">
						<!-- <view class="dg"></view> -->
						<image src="../../static/img/ax.png" mode="" class="ax"></image>
						<view class="home_module_header_title">
							袜叔推荐
						</view>
					</view>
				</view>
				<view class="scroll">
					<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000"
						:duration="500">
						<swiper-item v-for="(item,index) in wsList" :key="index">
							<view class="swiper-item">
								<view class="swiper-item_ctx">
									<view class="swiper-itemItem" v-for="(newItem,newIndex) in item" :key="newIndex"
										@click="goPerson(newItem)">
										<image :src="newItem.image" mode=""></image>
										<view class=""
											style="display: flex;justify-content: space-between;align-items: center;">
											<view class=""
												:style="newItem.sex_text == '男'?'color:#045B9B;':'color:#E64755'">
												好{{newItem.sex_text}}
											</view>
											<view class="" style="font-size: 24rpx;">
												{{newItem.age == '无'?'':newItem.age}}{{newItem.age == '无'?'':'岁'}}
											</view>
										</view>
										<view class="" style="margin-top: 12rpx;display: flex;align-items: center;">
											<image v-if="newItem.sex_text == '女'" src="../../static/img/xl.png" mode=""
												style="width: 30rpx;height: 26rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<image v-if="newItem.sex_text == '男'" src="../../static/img/xll.png" mode=""
												style="width: 30rpx;height: 26rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<span style="font-size: 22rpx;">{{newItem.xueli}}</span>
										</view>
										<view class="" style="margin-top: 12rpx;display: flex;align-items: center;">
											<image v-if="newItem.sex_text == '女'" src="../../static/img/hy.png" mode=""
												style="width: 28rpx;height: 28rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<image v-if="newItem.sex_text == '男'" src="../../static/img/hyl.png" mode=""
												style="width: 28rpx;height: 28rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<span style="font-size: 22rpx;">{{newItem.hangye}}</span>
										</view>
										<!-- <view class="swiper-itemItem_info">
											<view class="swiper-itemItem_name">
												{{newItem.name}}<span style="font-size: 20rpx;margin-left: 10rpx;">({{newItem.sex_text}})</span>
											</view>
										</view>
										<view class="swiper-itemItem_age">
											年龄：{{newItem.age == '无'?'':newItem.age}}{{newItem.age == '无'?'':'岁'}}
										</view>
										<view class="" style="font-size: 22rpx;margin-top: 6rpx;">
											学历：{{newItem.xueli}}
										</view>
										<view class="" style="font-size: 22rpx;margin-top: 6rpx;max-width: 272rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
											行业：{{newItem.hangye}}
										</view> -->
										<!-- <view class="swiper-itemItem_yq" v-html="newItem.demand">

										</view> -->
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="home_module">
				<view class="home_module_header">
					<view class="home_module_header_left">
						<!-- <view class="dg"></view> -->
						<image src="../../static/img/ax.png" mode="" class="ax"></image>
						<view class="home_module_header_title">
							快报好男好女推荐
						</view>
					</view>
				</view>
				<view class="scroll">
					<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000"
						:duration="500">
						<swiper-item v-for="(item,index) in kbList" :key="index">
							<view class="swiper-item">
								<view class="swiper-item_ctx">
									<view class="swiper-itemItem" v-for="(newItem,newIndex) in item" :key="newIndex"
										@click="goHn(newItem)">
										<image :src="newItem.image" mode=""></image>
										<view class=""
											style="display: flex;justify-content: space-between;align-items: center;">
											<view class=""
												:style="newItem.sex_text == '男'?'color:#045B9B;':'color:#E64755'">
												好{{newItem.sex_text}}
											</view>
											<view class="" style="font-size: 24rpx;">
												{{newItem.age == '无'?'':newItem.age}}{{newItem.age == '无'?'':'岁'}}
											</view>
										</view>
										<view class="" style="margin-top: 12rpx;display: flex;align-items: center;">
											<image v-if="newItem.sex_text == '女'" src="../../static/img/xl.png" mode=""
												style="width: 30rpx;height: 26rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<image v-if="newItem.sex_text == '男'" src="../../static/img/xll.png" mode=""
												style="width: 30rpx;height: 26rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<span style="font-size: 22rpx;">{{newItem.xueli}}</span>
										</view>
										<view class="" style="margin-top: 12rpx;display: flex;align-items: center;">
											<image v-if="newItem.sex_text == '女'" src="../../static/img/hy.png" mode=""
												style="width: 28rpx;height: 28rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<image v-if="newItem.sex_text == '男'" src="../../static/img/hyl.png" mode=""
												style="width: 28rpx;height: 28rpx;margin-right: 16rpx;border-radius: 0;">
											</image>
											<span style="font-size: 22rpx;">{{newItem.hangye}}</span>
										</view>
										<!-- <view class="swiper-itemItem_info">
											<view class="swiper-itemItem_name">
												{{newItem.name}}<span style="font-size: 20rpx;margin-left: 10rpx;">({{newItem.sex_text}})</span>
											</view>
										</view>
										<view class="swiper-itemItem_age">
											年龄：{{newItem.age == '无'?'':newItem.age}}{{newItem.age == '无'?'':'岁'}}
										</view>
										<view class="" style="font-size: 22rpx;margin-top: 6rpx;">
											学历：{{newItem.xueli}}
										</view>
										<view class="" style="font-size: 22rpx;margin-top: 6rpx;max-width: 272rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
											行业：{{newItem.hangye}}
										</view> -->
										<!-- <view class="swiper-itemItem_yq" v-html="newItem.demand">

										</view> -->
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="" v-else-if="activeTabIndex == 1" style="padding: 60rpx 30rpx">

			<view class="lawyer_list">
				<view class="lawyer_listItem" v-for="(item,index) in layList" :key="index" @click="goLay(item)">
					<image :src="item.avatar" mode=""></image>
					<view class="lawyer_listItem_right">
						<view class="lawyer_listItem_right_name">
							{{item.nickname}}
						</view>
						<view class="lawyer_listItem_right_goodat">
							擅长领域：<span>{{item.bio}}</span>
						</view>
						<!-- <view class="lawyer_listItem_right_goodat">
							所属律所：<span>{{item.lvsuo}}</span>
						</view> -->
						<view class="lawyer_listItem_right_desc">
							{{item.content}}
						</view>
						<view class="lawyer_listItem_right_zx">
							立即咨询
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pkList" v-else-if="activeTabIndex == 2">
			<u-picker @confirm="selectConfirm" v-model="selectShow" mode="selector" :range="selectRange"></u-picker>
			<!-- <view class="addPkBtn" @click.stop="openSelect">
				<u-icon name="plus" size="60" color="#fff"></u-icon>
			</view> -->
			<view class="pkListItem" v-for="(item,index) in pkList" :key="index" @click="goWorkDetail(item)">
				<image :src="item.image" mode="" class="bigImage"></image>
				<view class="pkListItem_title">
					{{item.title}}
				</view>
				<view class="pkListItem_info">
					<view class="pkListItem_info_left">
						<image :src="item.user.avatar" mode="" @click.stop="goWorker(item)"></image>
						<view class="pkListItem_info_left_name" @click.stop="goWorker(item)">
							{{item.user.nickname}}
						</view>
						<view class="" style="margin-left: 20rpx;color: #999;font-size: 22rpx;">
							{{timestamp(item.createtime)}}
						</view>
					</view>
					<view class="pkListItem_info_right">
						<view class="" style="display: flex;align-items: center;" v-if="item.is_good == 0"
							@click.stop="toGood(item,index)">
							<span style="margin-right: 10rpx;color: #ffc31c;font-size: 22rpx;">点赞</span><u-icon
								name="thumb-up" color="#ffc31c" size="28"></u-icon>
							<span style="margin-left: 10rpx;color:#ffc31c;font-size: 22rpx;">{{item.good_num}}</span>
						</view>
						<view class="" style="display: flex;align-items: center;" v-else
							@click.stop="toGood(item,index)">
							<span style="margin-right: 10rpx;color: #ffc31c;font-size: 22rpx;">已点赞</span><u-icon
								name="thumb-up-fill" color="#ffc31c" size="28"></u-icon>
							<span style="margin-left: 10rpx;color:#ffc31c;font-size: 22rpx;">{{item.good_num}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="padding: 30rpx 0;">
				<u-loadmore :status="pkStatus" />
			</view>
		</view>
		<view class="" v-else-if="activeTabIndex == 3" style="padding: 30rpx">
			<view class="myExchange">
				<view class="myExchange_header">
					<u-avatar :src="userInfo.avatar"></u-avatar>
					<view
						style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<view class="">
							{{userInfo.nickname}}
						</view>
						<view class="" style="color: #999;font-size: 22rpx;">
							身份:{{sfArr[userInfo.level]}}
						</view>
					</view>
				</view>
				<view class="myExchange_body">
					<view class="myExchange_bodyItem" @click="goMsg">
						<view class="" style="display: flex;align-items: center;">
							<span>消息列表</span>
							<view class="red_circle" v-if="userInfo.un_read_num != 0">
								{{userInfo.un_read_num}}
							</view>
						</view>
						<u-icon name="arrow-right" color="#666666" size="20"></u-icon>
					</view>
					<view class="myExchange_bodyItem" @click="goMyLay">
						<view class="">
							律师咨询
						</view>
						<u-icon name="arrow-right" color="#666666" size="20"></u-icon>
					</view>
					<view class="myExchange_bodyItem" @click="goMyWork">
						<view class="">
							我的发布
						</view>
						<u-icon name="arrow-right" color="#666666" size="20"></u-icon>
					</view>
					<!-- <view class="myExchange_bodyItem" @click="goSl">
						<view class="">
							我的私聊
						</view>
						<u-icon name="arrow-right" color="#666666" size="20"></u-icon>
					</view> -->
					<view class="myExchange_bodyItem" @click="goSX">
						<view class="">
							我的私信
						</view>
						<u-icon name="arrow-right" color="#666666" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getConfig,
		getXqList,
		getWsList,
		getKbList,
		getLawyerList,
		getMember,
		getPkAllList,
		getPkAdd,
		getGood
	} from '@/api/index.js'
	import {
		baseUrl
	} from '@/config/config.js'
	export default {
		data() {
			return {
				selectRange: ['照片拍客', '视频拍客'],
				selectShow: false,
				ceShow: false,
				noticeList: [],
				sfArr: ['用户', '红娘', '律师', '拍客'],
				avatarSrc: '',
				baseUrl: '',
				tabList: [{
						name: '红娘相亲'
					},
					{
						name: '律师帮忙'
					},
					{
						name: '拍客美图'
					},
					{
						name: '我的交流'
					}
				],
				activeTabIndex: 0,
				xqInfo: {},
				wsList: [],
				kbList: [],
				layList: [],
				userInfo: {},
				pkList: [],
				pkPage: 1,
				pkLimit: 10,
				pkStatus: 'loadmore',
				pkType: '',
				pkDialogShow: false,
				pktitle: '',
				value: '',
				header: {
					token: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').token : ''
				},
				fileList: [],
				action: '',
				fmFileList: [],
				logo: '',
				can_upload: '1',
				hide_data: '0',
				hf_data: '',
				qb_data: '',
				jjl: '',
				spList: [],
				open_xq: 1
			}
		},
		computed: {
			...mapGetters(['getSocketMessage']),
			socketMessage() {
				return this.getSocketMessage;
			}
		},
		methods: {
			backNewHome(){
				uni.reLaunch({
					url:'/pages/views/newHome'
				})
			},
			onSuccess(e) {
				this.spList.push(e.data.fullurl)
			},
			goMyWork() {
				uni.navigateTo({
					url: '/pages/views/myWork'
				})
			},
			goSX(){
				uni.navigateTo({
					url:'/pages/views/chatList/chatList'
				})
			},
			goSl() {
				uni.navigateTo({
					url: '/pages/message/message'
				})
			},
			goWorker(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/views/workerDetail?id=${item.user_id}`
				})
			},
			goWorkDetail(item) {
				uni.navigateTo({
					url: `/pages/views/worksDetail?id=${item.id}`
				})
			},
			async toGood(item, index) {
				// console.log(item.id);
				const res = await getGood({
					id: item.id
				})

				if (this.pkList[index].is_good == 1) {
					this.pkList[index].is_good = 0
					this.pkList[index].good_num -= 1
				} else {
					this.pkList[index].is_good = 1
					this.pkList[index].good_num += 1
				}
			},
			timestamp(timestamp) {
				var date = new Date(timestamp * 1000); // 转换为毫秒
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2);
				var day = ('0' + date.getDate()).slice(-2);
				var hours = ('0' + date.getHours()).slice(-2);
				var minutes = ('0' + date.getMinutes()).slice(-2);
				var seconds = ('0' + date.getSeconds()).slice(-2);

				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			},
			openSelect() {
				if (this.userInfo.level != 3) {
					return uni.showToast({
						icon: 'none',
						title: '暂无权限'
					})
				}
				this.selectShow = true
			},
			async submit() {
				console.log(this.spList);
				if (this.pktitle == '') {
					return uni.showToast({
						icon: 'none',
						title: '请输入标题'
					})
				}
				if (this.pkType == 'zp' && this.fileList.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请上传图片'
					})
				}
				if (this.pkType == 'sp' && this.spList.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请上传视频'
					})
				}
				if (this.fmFileList.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请上传封面图'
					})
				}
				let data = {
					title: this.pktitle,
					content: this.value
				}
				if (this.pkType == 'zp') {
					data.image = this.fmFileList[0].response.data.url
					data.images = this.fileList.map(e => {
						return e.response.data.url
					}).join(',')
				} else {
					data.image = this.fmFileList[0].response.data.url
					data.file = this.spList[0]
				}
				const res = await getPkAdd(data)
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
				this.closeDialog()
				this.pkPage = 1
				this.pkList = []
				this.getPkList()
			},
			closeDialog() {
				this.pkDialogShow = false
				this.title = ''
				this.value = ''
				this.fileList = []
				this.spList = []
			},
			success(data, index, lists, name) {
				this.fileList = lists
			},
			fmSuccess(data, index, lists, name) {
				this.fmFileList = lists
			},
			remove(index, lists, name) {
				this.fileList = lists
			},
			fmRemove(index, lists, name) {
				this.fmFileList = lists
			},
			selectConfirm(e) {
				// console.log(e);
				if (e[0] == 0) { //照片拍客
					this.pkType = 'zp'
				} else { //视频拍客
					this.pkType = 'sp'
				}
				this.pkDialogShow = true
			},
			goMsg() {
				uni.navigateTo({
					url: '/pages/views/msgList'
				})
			},
			goMyLay() {
				uni.navigateTo({
					url: '/pages/views/mylayList'
				})
			},
			goLay(item) {
				uni.navigateTo({
					url: `/pages/views/layDetail?id=${item.id}&name=${item.nickname}`
				})
			},
			goHn(item) {
				uni.navigateTo({
					url: `/pages/views/blindHn?id=${item.id}&name=${item.name}`,
				})
			},
			goPerson(item) {
				uni.navigateTo({
					url: `/pages/views/blindPerson?id=${item.id}&name=${item.name}`,
				})
			},
			chooseTab(item, index) {
				this.activeTabIndex = index
			},
			splitArray(arr) {
				let newArrays = [];
				for (let i = 0; i < arr.length; i += 2) {
					let newArray = arr.slice(i, i + 2);
					newArrays.push(newArray);
				}
				return newArrays;
			},
			goBindDetail(val) {
				uni.navigateTo({
					url: `/pages/views/blindDetail?id=${val.id}`
				})
			},
			goXqHdList() {
				uni.navigateTo({
					url: '/pages/views/blindList'
				})
			},
			async config() {
				const res = await getConfig()
				// console.log(res);
				this.logo = res.data.logo
				this.can_upload = res.data.can_upload
				this.hide_data = res.data.hide_data
				this.jjl = res.data.jjl
				this.qb_data = res.data.qb_data
				this.hf_data = res.data.hf_data
				this.open_xq = res.data.open_xq
				console.log(this.open_xq);
			},
			async getXq() {
				const res = await getXqList({
					page: 1,
					limit: 3
				})
				if (res.data.data.length > 0) {
					this.xqInfo = res.data.data
				}
			},
			async getWs() {
				const res = await getWsList()
				this.wsList = this.splitArray(res.data)
			},
			async getKb() {
				const res = await getKbList()
				// console.log(333,res);
				this.kbList = this.splitArray(res.data)
				console.log(444, this.kbList);
			},
			async getLawyer() {
				const res = await getLawyerList()
				// console.log(989,res);
				this.layList = res.data
			},
			async getUserInfo() {
				const res = await getMember()
				this.userInfo = res.data
			},
			async getPkList() {
				this.pkStatus = 'loading'
				let data = {
					page: this.pkPage,
					limit: this.pkLimit
				}
				const res = await getPkAllList(data)
				this.pkList = [...this.pkList, ...res.data.data]
				if (res.data.data.length < this.pkLimit) {
					this.pkStatus = 'nomore'
				} else {
					this.pkStatus = 'loadmore'
				}
			}
		},
		onLoad(e) {
			if(e && e.activeTabIndex){
				this.activeTabIndex = e.activeTabIndex*1
			}
			this.ws.pageFun(this.pageDataLoad, this);
			this.action = baseUrl + '/api/common/upload'
			this.baseUrl = baseUrl
		},
		onShow() {
			switch (this.activeTabIndex) {
				case 0:
					this.config()
					this.getXq()
					this.getWs()
					this.getKb()
					break;
				case 1:
					this.config()
					this.getLawyer()
					break;
				case 2:
					this.config()
					this.pkPage = 1
					this.pkList = []
					this.getPkList()
					break;
				case 3:
					this.config()
					this.getUserInfo()
			}
		},
		onReachBottom() {
			if (this.activeTabIndex == 2) {
				if (this.pkStatus == 'nomore') return
				this.pkPage++
				this.getPkList()
			}
		},
		watch: {
			activeTabIndex: {
				handler(nval) {
					switch (nval) {
						case 0:
							this.config()
							this.getXq()
							this.getWs()
							this.getKb()
							break;
						case 1:
							this.getLawyer()
							break;
						case 2:
							this.pkPage = 1
							this.pkList = []
							this.getPkList()
							break;
						case 3:
							this.getUserInfo()
					}
				}
			},
			socketMessage(newVal, oldVal) {
				if (newVal) {
					this.ceShow = true
					this.noticeList = [newVal.slice(0, -1)]
					setTimeout(() => {
						this.ceShow = false
					}, 10000)
				}
			}
		}
	}
</script>

<style scope lang="scss">
	.home {
		min-height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.ax {
			width: 70rpx;
			height: 55rpx;
		}

		// ::v-deep(.u-collapse-body){
		// 	height: fit-content;
		// }
		.dialogMain {
			padding: 30rpx;

			.dialogMain_top {
				display: flex;
				justify-content: flex-end;

				image {
					width: 23rpx;
					height: 23rpx;
				}
			}

			.dialogMain_bottom {
				display: flex;
				justify-content: flex-end;
				color: #045B9B;
				padding-right: 18rpx;
				padding-bottom: 16rpx;
				margin-top: 16rpx;
			}
		}

		.home_header {
			width: 750rpx;
			height: 438rpx;
			// background-color: red;
			position: relative;
			display: flex;
			align-items: flex-end;
			.back_header{
				width: 650rpx;
				height: 240rpx;
				// background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-64%);
			}

			.home_tag_box {
				width: 750rpx;
				position: absolute;
				bottom: 77rpx;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.home_tag_boxItem {
					padding: 6rpx 17rpx;
					background: linear-gradient(to bottom, #9f8f5f, #f7ebaf);
					font-size: 28rpx;
					color: #045B9B;
					border-radius: 24rpx;
				}
			}

			.home_tab_box {
				width: 750rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.home_tab_boxItem {
					width: 151rpx;
					height: 48rpx;
					background: linear-gradient(to bottom, #1CA893, #085D92);
					border-radius: 36rpx 36rpx 0rpx 0rpx;
					font-size: 28rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.active {
					background: #fff;
					color: #045B9B;
				}
			}
		}

		.pkList {
			height: 0;
			flex: 1;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.addPkBtn {
				position: fixed;
				right: 40rpx;
				bottom: 120rpx;
				width: 100rpx;
				height: 100rpx;
				background-color: #f04c0a;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 9999999;
			}

			// background-color: red;
			.pkListItem {
				margin-bottom: 20rpx;
				width: 690rpx;
				border-bottom: 1rpx solid #e2e2e2;
				padding-bottom: 20rpx;

				.bigImage {
					width: 690rpx;
					height: 354rpx;
				}

				.pkListItem_title {
					margin-top: 20rpx;
					max-width: 690rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.pkListItem_info {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.pkListItem_info_left {
						display: flex;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 20rpx;
							border-radius: 50%;
						}

						.pkListItem_info_left_name {
							max-width: 250rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-size: 24rpx;
						}
					}

					.pkListItem_info_right {
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.myExchange {
			.myExchange_header {
				display: flex;
				color: #333;
				margin-bottom: 30rpx;
				justify-content: center;
			}

			.myExchange_body {

				.myExchange_bodyItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666;
					padding: 40rpx 20rpx;
					border-bottom: 1rpx solid #E2E2E2;

					.red_circle {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						line-height: 24rpx;
						text-align: center;
						font-size: 22rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.lawyer_list {
			display: flex;
			flex-direction: column;
			align-items: center;

			.lawyer_listItem {
				width: 690rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 28rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #e2e2e2;

				image {
					width: 163rpx;
					height: 163rpx;
				}

				.lawyer_listItem_right {
					width: 480rpx;
					font-size: 22rpx;
					color: #666;

					.lawyer_listItem_right_name {
						color: #045B9B;
						font-size: 28rpx;
					}

					.lawyer_listItem_right_goodat {
						margin-top: 16rpx;
						display: flex;
						align-items: center;

						span {
							display: inline-block;
							max-width: 380rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.lawyer_listItem_right_desc {
						margin-top: 16rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						white-space: normal;
					}

					.lawyer_listItem_right_zx {
						width: fit-content;
						padding: 5rpx 10px;
						background-color: #045B9B;
						margin-top: 16rpx;
						color: #fff;
						display: flex;
						justify-content: flex-end;
						float: right;
						border-radius: 6rpx;
					}
				}
			}
		}

		.home_module {
			width: 750rpx;
			padding: 30rpx;

			.scroll {
				width: 630rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #E2E2E2;

				.swiper {
					height: 412rpx;

					.swiper-item {
						display: block;
						height: 100%;
						padding: 0 20rpx;


						.swiper-item_ctx {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: space-between;

							.swiper-itemItem {
								width: 272rpx;



								image {
									width: 272rpx;
									height: 272rpx;
									border-radius: 36rpx;
								}

								.swiper-itemItem_info {
									display: flex;
									align-items: center;
									justify-content: space-between;

									.swiper-itemItem_name {
										max-width: 272rpx;
										font-size: 24rpx;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
									}


								}

								.swiper-itemItem_age {
									margin-top: 6rpx;
									font-size: 22rpx;
								}

								.swiper-itemItem_yq {
									margin-top: 4rpx;
								}
							}
						}
					}
				}
			}
			.xswiper{
				height: 420rpx;
			}

			.firstImg {
				width: 630rpx;
				height: 354rpx;
				margin: 0 auto;
				margin-top: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.firstText {
				width: 630rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				color: #333;
				font-size: 28rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #E2E2E2;
			}

			.home_module_header {
				display: flex;
				align-items: center;
				justify-content: space-between;



				.home_module_header_left {
					display: flex;
					align-items: center;

					.dg {
						width: 10rpx;
						height: 34rpx;
						background-color: #045B9B;
						margin-right: 20rpx;
					}

					.home_module_header_title {
						font-size: 30rpx;
						color: #EC6468;
					}
				}

				.home_module_header_right {
					font-size: 22rpx;
					color: #666;
				}
			}
		}
	}
</style>